<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui/css/layui.css"  media="all">
</head>
<body>
<!--搜索框-->
<form class="layui-form layui-form-pane" action="">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">筛选数据</label>
            <div class="layui-input-inline">
                <input type="text" name="title" lay-verify="title" id="logReload" autocomplete="off" placeholder="请输入查询条件" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">开始时间</label>
            <div class="layui-input-block">
                <input type="text" id="startDate" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">结束时间</label>
            <div class="layui-input-block">
                <input type="text"  id="endDate" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline" id="headerContent">
            <button type="button" class="layui-btn" data-type="reload">查询</button>
        </div>
    </div>
</form>
<table id="logList" lay-filter="logList" ></table>


<script src="../lib/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use(['table','form','jquery','laydate'], function(){
        var table = layui.table;
        var form = layui.form;
        var $ = layui.jquery;
        var laydate = layui.laydate;
        //获取社团数据
        table.render({
            elem: '#logList'
            ,height: 480
            ,url: '/log' //数据接口
            ,request:{
                pageName: 'pageNumber' //页码的参数名称，默认：page
                ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
            ,response: {
                countName: 'total'
            }
            ,page: true //开启分页
            ,totalRow:true
            ,cellMinWidth: 70
            ,even:true
            ,skin:'line'
            ,limit: 10
            ,cols: [[ //表头
                {field: 'id', hide:'true'}
                ,{field: 'description', title: '日志描述',align:'center'}
                ,{field: 'createUsername', title: '操作人',align:'center'}
                ,{field: 'createDatetime', title: '操作时间',align:'center'}
            ]],
            id:'logTable'
        });
        //监听工具条
        table.on('tool(logList)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'open'){ //启用
                //do somehing
            }else if(layEvent === 'close'){//禁用
                //do something
            }else if(layEvent === 'delete'){ //删除
                layer.confirm('是否删除当前选中数据',{icon: 3, title:'提示'}, function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令

                });
            } else if(layEvent === 'update'){ //编辑
                //do something
                //同步更新缓存对应的值

            }
        });

        //模糊查询
        var active = {
            reload: function(){
                var logReload = $('#logReload'); //获取输入框的id
                var startDate = $("#startDate");
                var endDate = $("#endDate");
                //执行重载
                table.reload('logTable', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        searchKey: logReload.val(),
                        startTime:startDate.val(),
                        endTime:endDate.val()
                    }
                }, 'data');
            }
        }

        $('#headerContent .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        laydate.render({
            elem:'#startDate',
            type:'datetime'
        });
        laydate.render({
            elem:'#endDate',
            type:'datetime'
        });
    });
</script>

</body>
</html>